<!--生成代码：导入表-->
<!--created by lx 2023/6/8-->
<template>
  <div>
    <!--按钮-->
    <a-button type="primary" @click="openDrawer">
      <template #icon>
        <icon-import />
      </template>
      导入表
    </a-button>

    <!--抽屉：选择表-->
    <a-drawer
      :visible="visible"
      :width="720"
      @cancel="closeDrawer"
      @ok="importDbTable"
    >
      <!--查询-->
      <TableSearch
        ref="searchRef"
        expand
        :data-source="SEARCH_FORM"
        @change="searchTable"
      />

      <!--表格-->
      <a-table
        v-model:selected-keys="selectedKeys"
        :columns="COLUMNS_TABLE"
        :data="tableList"
        row-key="name"
        :row-selection="rowSelection"
      />
    </a-drawer>
  </div>
</template>

<script lang="ts" setup name="ImportTableDrawer">
  import { ref, computed, reactive } from 'vue';
  import TableSearch from '@/common/components/cac-components/advanced-search/index.vue';
  import { DataSourceRecord } from '@/api/infrastructure/model/dataSourceConfigModel';
  import { queryDataSourceRecord } from '@/api/infrastructure/data-source-config';
  import {
    DbTableReq,
    DbTableRecord,
    CodegenRecordReq,
  } from '@/api/infrastructure/model/codegenModel';
  import {
    queryDbTableRecord,
    createCodegenRecord,
  } from '@/api/infrastructure/codegen';
  import {
    Message,
    TableColumnData,
    TableRowSelection,
  } from '@arco-design/web-vue';

  const emits = defineEmits(['afterSubmit']);
  const visible = ref<boolean>(false);

  const dataSourceList = ref<DataSourceRecord[]>([]);
  const dataSourceLoading = ref<boolean>(false);
  const listDataSource = async () => {
    dataSourceLoading.value = true;
    try {
      const { data } = await queryDataSourceRecord();
      dataSourceList.value = data;
    } finally {
      dataSourceLoading.value = false;
    }
  };
  const loading = ref<boolean>(false);
  const searchRef = ref<any>();
  const SEARCH_FORM = computed(() => {
    const options: { label: string; value: string }[] = [];
    dataSourceList.value.forEach((elem) => {
      options.push({ label: elem.name, value: elem.id });
    });
    return [
      {
        labelText: '数据源',
        fieldName: 'dataSourceConfigId',
        type: 'select',
        initialValue: 0,
        options,
      },
      { labelText: '表名称', fieldName: 'name', type: 'text' },
      { labelText: '表描述', fieldName: 'comment', type: 'text' },
    ];
  });

  const rowSelection = reactive<TableRowSelection>({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<string[]>([]);
  const tableList = ref<DbTableRecord[]>([]);
  const dataSourceConfigId = ref<string | number>(0);
  const searchTable = async (params: DbTableReq = {}) => {
    loading.value = true;
    selectedKeys.value = [];
    dataSourceConfigId.value = params.dataSourceConfigId || 0;
    try {
      const { data } = await queryDbTableRecord(params);
      tableList.value = data;
    } finally {
      loading.value = false;
    }
  };

  const COLUMNS_TABLE: TableColumnData[] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      width: 80,
      render: ({ rowIndex }) => rowIndex + 1,
      fixed: 'left',
    },
    { title: '表名称', dataIndex: 'name' },
    { title: '表描述', dataIndex: 'comment' },
  ];

  const openDrawer = () => {
    listDataSource();
    // searchTable();
    searchRef.value.handleSubmit();
    visible.value = true;
  };
  const closeDrawer = () => {
    selectedKeys.value = [];
    visible.value = false;
  };
  const importDbTable = async () => {
    const reqdata: CodegenRecordReq = {
      dataSourceConfigId: dataSourceConfigId.value,
      tableNames: selectedKeys.value,
    };
    try {
      const { data } = await createCodegenRecord(reqdata);
      Message.success(`成功导入${data.length}张表`);
    } finally {
      emits('afterSubmit');
      closeDrawer();
    }
  };
</script>
